let id = 1000;
import {objectCompare}  from '../../../assets/js/objectCompare.js'
import {selectAttr} from '../../../assets/js/selectAttr.js'
export default {
    data() {
      return {
        //请求后台路径
        SRC:'',
        moudleShow: false,
        pageShow: false,
        revampShow: false,
        pageParentCapy: 1,
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'projectName'
        },
        ruleForm: {
          moudleName: '',
          moudleId: 0,
          moudleUrl: '',
          moudleIntro: ''
        },
        rules: {
          moudleName: [
            { required: true, message: '请输入模块名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          moudleId: [
            { required: true, message: 'ID不能为空'},
            { type: 'number', message: 'ID必须为数字值'}
          ]
        },
        revampForm: {
          revampName: '',
          revampId: 0,
          revampSortId:0,
          revampIntro: '',
          revampUrl: ''
        },
        revampRules:{
          revampName: [
            { required: true, message: '请输入模块名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          revampSortId: [
            { required: true, message: 'ID不能为空'},
            { type: 'number', message: 'ID必须为数字值'}
          ]
        }
      };
    },
    methods: {
      // 通用 成功 与 失败
      successFun(data) {
        this.$message({
          message: data,
          type: 'success'
        });
      },
      errorFun(data) {
        this.$message.error(data);
      },
      // 工程展示
      moudleShowFun() {
        if(this.data2.length == 0){
           this.ruleForm.moudleId = 1;
        }else{
           this.ruleForm.moudleId = this.data2[this.data2.length-1].sortId+1;
         }
        this.ruleForm.moudleName ='';
        this.ruleForm.moudleIntro = '';
        this.ruleForm.moudleUrl = '';
        this.moudleShow = true;
      },
      // 添加工程
      append(store, data) {
        this.pageShow = true;
        this.pageForm.parentNode = data.label;
        this.pageForm.parentId = data.id;
        this.pageForm.pageName = "";
        // 获取最后一个子集的ID
        if(data.children != undefined){
          if(data.children.length > 0){
            this.pageForm.pageId = data.children[data.children.length-1].id+1;
          }else{
            this.pageForm.pageId = data.id*1000+1
          }
        }else{
          this.pageForm.pageId = parseInt(data.id*1000+1);
        }
        this.pageForm.pageIntro = '',
        this.pageParentCapy = this.pageForm.parentNode;
      },
      // 删除模块
      remove(store, data) {
        var that = this;
        var id = data.id;
        var compare = function(d) {
          for(var i=0; i<d.length; i++){
            if(data.id == d[i].id){
              d.splice(i,1);
            }
          }
          return d
        }.bind(this)
        compare(this.data2);
        this.$http.post(`${this.SRC}project/delete.do?id=${id}`).then(function(res){
          if(res.body["code"] === 0){
           that.successFun("删除成功！");
          }else{
           that.errorFun("删除失败");
          }
        })
      },
      // 修改模块
      revamp(store, data){
        this.revampShow = true;
        this.revampForm.revampId = data.id;
        this.revampForm.revampSortId = data.sortId; 
        this.revampForm.revampName = data.projectName;
        this.revampForm.revampUrl = data.projectUrl; 
        this.revampForm.revampIntro = data.description;
      },
      // 链接跳转
      href(stroe,data){
        window.open(data.url,"_blank")
      }, 
      // 渲染
      renderContent(h, { node, data, store }) {
         return (
          <span>
            <span>
              <span class="el-tag el-tag--gray">{data.projectName}</span>
            </span>
            <span class="el-tag el-tag--success" style="margin-left: 10px;">工程标识：{data.id}</span>
            <span class="el-tag el-tag--success" style="margin-left: 10px;">工程SRC：{data.projectUrl}</span>
            <span class="el-tag el-tag--success" style="margin-left: 10px;">工程描述：{data.description}</span>
            <span style="float: right; margin-right: 20px">
              <el-button size="mini" type="warning" on-click={ () => this.revamp(store, data) }>修改</el-button>
              <el-button size="mini" type="danger" on-click={ () => this.remove(store, data) }>删除</el-button>
            </span>
          </span>);
      },
      // 工程提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var that = this;
            var obj = {};
            obj.sortId = this.ruleForm.moudleId;
            obj.projectUrl = this.ruleForm.moudleUrl;
            obj.description = this.ruleForm.moudleIntro;
            obj.projectName = this.ruleForm.moudleName;
            this.$http.get(`${this.SRC}project/add.do?sortId=${obj.sortId}&projectUrl=${obj.projectUrl}&description=${obj.description}&projectName=${obj.projectName}`).then(
              function(res){
                if(res.body["code"] === 0){
                  that.successFun("添加成功！")
                  that.data2.push(obj)
                  that.getProjectData();
                  that.data2 = objectCompare(this.data2,"sortId")// 排序
                }else{
                  that.errorFun(res.body['msg'])
                }
              }
            )
          } else {
            return false;
          }
        });
      },
      // 工程重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       // 工程修改
      revampSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var that = this;
            var  id = this.revampForm.revampId;
            var  sortId = this.revampForm.revampSortId;
            var  name = this.revampForm.revampName;
            var  url = this.revampForm.revampUrl;
            var  intro = this.revampForm.revampIntro;
            var  index = selectAttr(this.data2,id);//获取索引
            this.data2[index].id = id;
            this.data2[index].sortId = sortId;
            this.data2[index].projectName = name;
            this.data2[index].projectUrl = url;
            this.data2[index].description = intro;
            this.data2 = objectCompare(this.data2,"sortId")// 排序
            this.$http.get(`${this.SRC}project/modify.do?id=${id}&sortId=${sortId}&projectUrl=${url}&description=${intro}&projectName=${name}`).then(
              function(res){
                if(res.body["code"] === 0){
                  that.successFun("修改成功！")
                  that.data2 = objectCompare(this.data2,"sortId")// 排序
                }else{
                  that.errorFun(res.body['msg'])
                }
              }
            )
          } else {
            alert('error submit!!');
            return false;
          }
        });
      },
      // 工程修改重置
      resetRevamp(formName) {
        this.$refs[formName].resetFields();
      },
      //获取后台数据
      getProjectData(){
        this.$http.post(this.SRC+'project/list.do').then(
          function(res){
            if(res.body["code"] === 0){
              this.data2 = res.body["msg"]
              this.data2 = objectCompare(this.data2,"sortId");
            }else{
              this.errorFun(res.body['msg'])
            }
          }
        )
      }
    },
    mounted() {
      this.SRC = this.$store.getters.src;
      this.getProjectData();
    }
}